import 'package:ai/AppRouter.gr.dart';
import 'package:ai/config/Config.dart';
import 'package:ai/response/CreateResponse.dart';
import 'package:ai/service/CreateService.dart';
import 'package:ai/util/CommonUtils.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';

import 'empty_data.dart';
import 'item.dart';

@RoutePage()
class CreatePage extends StatefulWidget {
  const CreatePage({super.key});

  @override
  State<CreatePage> createState() => _CreatePageState();
}

class _CreatePageState extends State<CreatePage>
    with SingleTickerProviderStateMixin {
  TabController? _tabController;
  late var categoryList = [CategoryData.init()];

  final CreateService createService = CreateService();

  @override
  void initState() {
    super.initState();
    _loadData();
  }

  void _loadData() async {
    var list = await createService.init();
    setState(() {
      categoryList = list;
    });
    _tabController = TabController(length: list.length+2, vsync: this);
  }

  @override
  void dispose() {
    _tabController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        image: DecorationImage(
          alignment: Alignment.topCenter,
          image: AssetImage("asset/images/bg_mine.png"),
          fit: BoxFit.fitWidth,
        ),
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          backgroundColor: Colors.transparent,
          centerTitle: true,
          title: const Text("创作"),
          actions: [
            IconButton(
                onPressed: () {
                  CommonUtils.go(context, const SearchRoute());
                },
                icon: const Icon(Icons.search_rounded))
          ],
          bottom: _tabController == null
              ? null
              : getTabBar(),
        ),
        body: _tabController == null
            ? const Center(child: CircularProgressIndicator())
            : Container(
                padding:
                    const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
                child: TabBarView(
                  controller: _tabController,
                  children: List.generate(
                    categoryList.length + 2,
                    (index) {
                      if (index == 0) {
                        return const Center(
                          child: Text("全部"),
                        );
                      } else if (index == 1) {
                        return const EmptyData();
                      }else{
                        if(categoryList[index - 2].list.length==0){
                          return const EmptyData();
                        }
                      }
                      return GridView.builder(
                        itemCount: categoryList[index - 2].list.length ?? 0,
                        gridDelegate:
                            const SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 2,
                          crossAxisSpacing: 16,
                          mainAxisSpacing: 16,
                          childAspectRatio: 55 / 42,
                        ),
                        itemBuilder: (BuildContext context, int index1) {
                          return Item(item:categoryList[index - 2].list[index1]);
                        },
                      );
                    },
                  ),
                ),
              ), // 加载指示器
      ),
    );
  }

  TabBar getTabBar() {
    return TabBar(
      dividerHeight: 0,
      labelColor: Config.primaryColor,
      labelStyle: const TextStyle(
        fontWeight: FontWeight.bold,
      ),
      unselectedLabelStyle: const TextStyle(
        fontWeight: FontWeight.normal,
      ),
      unselectedLabelColor: Config.color39,
      controller: _tabController,
      isScrollable: true,
      indicatorColor: Config.primaryColor,
      tabAlignment: TabAlignment.start,
      tabs: List.generate(
        categoryList.length + 2,
            (index) {
          return index == 0
              ? const Tab(text: "全部")
              : index == 1
              ? const Tab(text: "收藏")
              : Tab(text: "${categoryList[index - 2].name}");
        },
      ),
    );
  }
}
